//################################
// 版权所有：鸽子游戏俱乐部
// 系统名称：鸽子游戏俱乐部-移动版
// 文件名称：increments.js
// 创建时间：2017年04月22日
// 创建人员：Lemo
// 功能说明：增值服务页面
//################################

'use strict';

import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    Image,
    TextInput,
    Dimensions,
    TouchableOpacity,
    InteractionManager,
} from 'react-native';

import Colors from '../../common/colors';
import Images from '../../images';
import UIConstants from '../../common/uiconstants';

import {setSoiType} from '../../actions';

const WINDOW_WIDTH = Dimensions.get('window').width;
const WINDOW_HEIGHT = Dimensions.get('window').height;

class Increments extends Component {
    constructor(props) {
        super(props);

        this.onChangeSearch = this.onChangeSearchFunc.bind(this);
        this.onBuyService = this.onBuyServiceFunc.bind(this);

        this.state = {
            searchTxt: null,
        };
    }

    componentDidMount() {
        
    }

    onChangeSearchFunc(stxt){
        //设置state值
        this.setState({searchTxt: stxt});
    }

    onBuyServiceFunc(price) {
        alert(price);
    }

    render() {
        return (
            <View style={styles.container}>
                <View style={{alignItems:'center',backgroundColor:Colors.appBackground}}>
                    <Image source={Images.SmsPic} style={styles.image} resizeMode={Image.resizeMode.stretch} />
                </View>
                <View style={styles.rowitem}>
                    <Text style={{color:'#000',fontSize:16,fontWeight:'bold'}}>{'[短信服务]订购专属短信服务，每月只需5个鸽子币'}</Text>
                </View>
                <View style={styles.rowitem}>
                    <TextInput 
                        ref={(ref) => {this.textInput = ref}}
                        style={styles.textinput}
                        placeholder={'填写您的手机号码'}
                        value = {this.state.searchTxt}
                        maxLength={11}
                        returnKeyType={'done'}
                        underlineColorAndroid={'transparent'}
                        autoCapitalize={'none'}
                        autoCorrect={false}
                        onChangeText={this.onChangeSearch}
                    />
                </View>
                <View style={[styles.rowitem,{flexDirection:'row'}]}>
                    <TouchableOpacity style={styles.buybtn} onPress={()=>{this.onBuyServiceFunc(5)}}>
                        <Text style={styles.buybtntxt}>1个月</Text>
                        <Text style={styles.buybtntxt}>(5鸽子币)</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.buybtn} onPress={()=>{this.onBuyServiceFunc(15)}}>
                        <Text style={styles.buybtntxt}>3个月</Text>
                        <Text style={styles.buybtntxt}>(15鸽子币)</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.buybtn} onPress={()=>{this.onBuyServiceFunc(30)}}>
                        <Text style={styles.buybtntxt}>6个月</Text>
                        <Text style={styles.buybtntxt}>(30鸽子币)</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.buybtn} onPress={()=>{this.onBuyServiceFunc(55)}}>
                        <Text style={styles.buybtntxt}>12个月</Text>
                        <Text style={styles.buybtntxt}>(55鸽子币)</Text>
                    </TouchableOpacity>
                </View>
                <View style={styles.splitter} />
                <View style={styles.emptyview} />
                <View style={styles.splitter} />
                <View style={styles.rowitem}>
                    <View style={{marginTop:10}}><Text style={{color:'#000',fontSize:14,fontWeight:'bold'}}>{'服务内容'}</Text></View>
                    <View style={{marginTop:10}}>
                        <Text style={{color:'#CDCD00',fontSize:12}}>{'暂未订购短信服务哦'}</Text>
                    </View>
                </View>
                <View style={styles.emptyview} />

            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'transparent',
    },
    emptyview: {
        flex: 1,
        height: 15,
        backgroundColor: 'transparent',
    },
    splitter: {
        borderColor: Colors.mySplitter,
        borderWidth: 0.4,
    },
    image: {
        width: WINDOW_WIDTH - 30,
        height: 150,
        margin: 5,
    },
    rowitem: {
        padding: 3,
        paddingLeft: 15,
        paddingRight: 15,
        backgroundColor: Colors.appBackground,
    },
    textinput: {
        borderWidth: 1,
        borderColor: '#CDCD00',
        borderRadius: 5,
        height: 40,
        fontSize: 14,
        paddingLeft: 10,
        alignItems: 'center',
    },
    buybtn: {
        alignItems: 'center',
        borderWidth: 1,
        borderColor: '#9B9B9B',
        borderRadius: 5,
        margin: 3,
        width: (WINDOW_WIDTH-60) / 4,
        padding: 5,
    },
    buybtntxt: {
        fontSize: 11,

    }
});

export default Increments;